<template>
  <el-card 
    class="demo-navigation" 
    :class="{ collapsed: collapsed }"
    shadow="always"
  >
    <template #header>
      <div class="card-header">
        <span>CesiumJS Demos</span>
      </div>
    </template>
    
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input 
        v-model="searchTerm" 
        placeholder="Search demos..." 
        :prefix-icon="Search"
        clearable
      />
      
      <div class="category-tabs">
        <el-select 
          v-model="selectedCategory" 
          placeholder="Select category"
          size="small"
        >
          <el-option
            v-for="category in categories"
            :key="category"
            :label="category === 'all' ? 'All Categories' : category"
            :value="category"
          />
        </el-select>
      </div>
    </div>
    
    <!-- Demo列表 -->
    <nav>
      <el-menu
        :default-active="currentDemo"
        @select="selectDemo"
      >
        <el-menu-item 
          v-for="demo in filteredDemos" 
          :key="demo.id"
          :index="demo.id"
        >
          {{ demo.name }}
        </el-menu-item>
        <el-menu-item v-if="filteredDemos.length === 0" disabled>
          No demos found
        </el-menu-item>
      </el-menu>
    </nav>
  </el-card>
</template>

<script>
import { ref, watch, computed } from 'vue';
import { Search } from '@element-plus/icons-vue'
import demoStore from '../store/demoStore.js';

export default {
  name: 'DemoNavigation',
  props: {
    currentDemo: {
      type: String,
      default: ''
    },
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  emits: ['demo-selected'],
  setup(props, { emit }) {
    const searchTerm = ref(demoStore.state.searchTerm);
    const selectedCategory = ref(demoStore.state.selectedCategory);
    
    // 从store获取数据
    const categories = computed(() => demoStore.categories);
    const filteredDemos = computed(() => demoStore.filteredDemos);
    
    // 监听搜索词变化
    watch(searchTerm, (newTerm) => {
      demoStore.setSearchTerm(newTerm);
    });
    
    // 监听分类变化
    watch(selectedCategory, (newCategory) => {
      demoStore.setSelectedCategory(newCategory);
    });
    
    const selectDemo = (demoId) => {
      emit('demo-selected', demoId);
    };

    return {
      searchTerm,
      selectedCategory,
      categories,
      filteredDemos,
      selectDemo,
      Search
    };
  }
};
</script>

<style scoped>
.demo-navigation {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  width: 300px;
  max-height: 90vh;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.demo-navigation.collapsed {
  transform: translateX(-285px);
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.search-container {
  margin-bottom: 15px;
}

.category-tabs {
  margin-bottom: 15px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 36px;
  line-height: 36px;
  padding: 0 12px !important;
  margin-bottom: 5px;
  border-radius: 4px;
}

:deep(.el-menu-item:hover) {
  background-color: #ecf5ff;
}

:deep(.el-menu-item.is-active) {
  background-color: #409eff;
  color: white;
}
</style>